<template>
  <div class="coupon">
    <h5>退款订单查询</h5>
    <div class="coupon-header">
      <div class="search-inp">
        <div class="item">
          <span class="item-text">商户信息</span>
          <el-input
            v-model="issueName"
            placeholder="请输入商家营业执照名称"></el-input>
        </div>
        <div class="item">
          <span class="item-text">商户号</span>
          <el-input
            v-model="issueName2"
            placeholder="请输入zg开头的用户号"></el-input>
        </div>
        <div class="item">
          <span class="item-text">业务类型</span>
          <el-select v-model="busKey" placeholder="请选择">
            <el-option
              v-for="item in searchoptions2"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="item">
          <span class="item-text">订单编号</span>
          <el-input  v-model="issueName3"  placeholder="请输入订单编号"></el-input>
        </div>
        <div class="item">
          <span class="item-text">起止时间</span>
          <el-date-picker
            v-model="timeArr"
            type="daterange"
            value-format="timestamp"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>
      <div class="button-box">
        <el-button type="primary" plain @click="searchClick">查询</el-button>
        <el-button type="info" plain @click="emptyClick">清空</el-button>
        <el-button type="primary" plain @click="downloadClick">下载</el-button>
      </div>
    </div>
    <div class="tabs">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column prop="id" label="订单编号"></el-table-column>
        <el-table-column prop="name" label="商户信息"></el-table-column>
        <el-table-column prop="category" label="申请退款金额"></el-table-column>
        <el-table-column prop="category" label="退款原因"></el-table-column>
        <el-table-column prop="category" label="原交易额"></el-table-column>
        <el-table-column prop="category" label="用户发起时间"></el-table-column>
        <el-table-column prop="category" label="商家同意时间"></el-table-column>
        <el-table-column label="退款状态">
          <template slot-scope="scope">
            <span>{{scope.row.couponName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="couponName" label="备注"></el-table-column>
      </el-table>
    <el-pagination 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        baseurl:'',
        tableData: [{
          id: '12987122',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987123',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }],
        issueName: "",//搜索参数-商户信息
        issueName2: "",//搜索参数-商户号
        issueName3: "",//搜索参数-订单编号
        busKey: "", //搜索参数-业务类型
        timeArr:[],//搜索参数-起止时间
        searchoptions2: [//业务类型
            { id: "1", name: "商超" },
            { id: "2", name: "酒店" },
            { id: "3", name: "直播带货" },
        ],
        //分页
        limit: 5,
        page: 1,
        total: 0,
        currentPage: 1,
    };
  },
  mounted() {
    this.baseurl=this.$store.state.baseurl
    // this.getCoupon();
  },
  methods: {
    //获取优惠券列表
    getCoupon() {
      var agreementEntity = {
        limit: this.limit,
        page: this.page,
      };
      this.axios({
        url: this.baseurl + "/coupon/list",
        method: "post",
        data: agreementEntity,
      }).then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.list;
          this.total = res.data.data.totalCount;
        } else {
          alert(res.data.errmsg);
        }
      });
    },
    //查询
    searchClick(){
        this.limit=5
        this.page=1
        this.getCoupon()
    },
    //清空
    emptyClick(){
        this.issueName=''
        this.issueName2=''
        this.busKey=''
        this.limit=5
        this.page=1
        this.getCoupon()
    },
    //下载
    downloadClick(){

    },
    //分页
    handleSizeChange(val) {
      this.limit = val;
      this.getCoupon();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getCoupon();
    },
    //处理时间戳
    format(shijianchuo) {
      var time = new Date(shijianchuo * 1000);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var f = time.getMinutes();
      var s = time.getSeconds();
      //想要什么格式可以自己改
      // return y + '-' + this.add0(m) + '-' + this.add0(d) +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
      return y + "-" + m + "-" + d + " " + this.add0(h) + ":" + this.add0(f);
    },
    //小于10的时候，前边加0（08：08：12）
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
  },
  watch: {
  },
};
</script>

<style scoped>
.coupon > h5 {
  display: flex;
  justify-content: space-between;
}
.coupon-header {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
/* 搜索input框 */
.search-inp {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.search-inp .item {
  /* width: 330px; */
  margin-bottom: 12px;
  display: flex;
}
.search-inp .item-text {
  width: 90px;
  text-align: right;
  display: inline-block;
  margin-right: 10px;
}
.search-inp input{
    width: 200px;
}
.button-box{
    margin-top: 20px;
    margin-left:20px;
}
.tabs {
    margin-top: 40px;
    padding-left: 20px;
}
.table-props-item{
  padding: 10px;
  text-align: left;
}
.table-props-item>span:first-child{
  padding-right: 10px;
}
/* 遮罩层 */
.mask {
  width: 100vw;
  height: 100vh;
  background: rgba(51, 51, 51, 0.692);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
}
.content {
  width: 700px;
  max-height: 90vh;
  overflow: auto;
  background: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  padding: 30px;
}
.item-content {
  margin-top: 10px;
}
.item-left,
.item-right {
  display: inline-block;
  width: 47%;
}
.item-left .item :nth-child(1) {
  width: 150px;
  text-align: right;
  display: inline-block;
  margin-right: 5px;
}
.item-right .item :nth-child(1) {
  width: 150px;
  text-align: right;
  display: inline-block;
}
.item span,.my-top {
  margin-top: 10px;
}
.remark {
  display: flex;
  align-items: flex-start;
}
</style>
<style>
.el-date-editor .el-range-separator {
  width: 10% !important;
}
.search-inp .el-input__inner{
    width: 200px;
}
.el-pagination{
    margin-top: 20px;
    text-align: right;
}
</style>
